<template>
  <q-page>
    <div class="tw-h-screen tw-w-full tw-flex tw-flex-col">
      <div class="tw-flex-none tw-grid tw-grid-flow-dense	 tw-grid-cols-4 tw-place-items-center">
        <div class="tw-w-full tw-h-full">
          <q-select class="tw-w-full tw-h-full" label="dataset" :model-value="dataset" :options="[dataset]"/>
        </div>
        <div class="tw-w-full tw-h-full">
          <q-input class="tw-w-full tw-h-full"
                   v-model="per_page"
                   label="per page"
                   @update:model-value="()=>{reset()}"
                   type="number"
          />
        </div>
        <div class="tw-w-full tw-h-full" v-if="files">
          <q-select v-model="select_file" label="file" :options="files"
                      @update:model-value="()=>{reset()}"
          />
        </div>
        <div class="tw-w-full tw-h-full" v-if="page_options.length">
          <q-select class="tw-w-full tw-h-full" v-model="select_page" label="page" :options="page_options"/>
        </div>
        <div class="tw-w-full tw-h-full" v-if="key_options">
          <q-select class="tw-w-full tw-h-full" v-model="select_x" label="x" :options="key_options"/>
        </div>
        <div class="tw-w-full tw-h-full" v-if="key_options">
          <q-select class="tw-w-full tw-h-full" v-model="select_y" label="y" :options="key_options"/>
        </div>
        <div class="tw-w-full  tw-h-full">
          <q-btn class="tw-m-3" color="primary" label="确认" @click="getData()"/>
        </div>
      </div>
      <div class="tw-flex-3 tw-bg-red-900">
        <div class="tw-w-full tw-h-full" >
          <LineChart class="tw-w-full tw-h-full tw-m-auto" v-if="data" :cid="dataset+select_page" :data="data" />
        </div>
      </div>
    </div>
  </q-page>
</template>

<script setup>
import {onMounted, ref} from "vue";
import LineChart from "components/LineChart.vue";

let dataset = ref("八钢") // TODO: 数据集选择
let files = ref(null)
let per_page = ref(10000) //
let page_options = ref([])
let select_page = ref(null)
let select_file = ref(null)
let key_options = ref(null)
let select_x =ref(null)
let select_y = ref(null)
let data = ref(null)

let getFiles = () => {
  return fetch('http://106.75.213.16/files').then(res => res.json()).then(data => {
    files.value = data
    select_file.value = data[0]
  })
}
let getData = ()=>{
  return fetch('http://106.75.213.16/data?'+new URLSearchParams({
    'name':select_file.value,
    'cnt':select_page.value,
    'per_page':per_page.value,
    'x':select_x.value,
    'y':select_y.value,
  })).then(res=>res.json()).then(res=>{
    data.value = JSON.parse(res)
  })
}

let reset = ()=>{
  page_options.value = []
  select_page.value = null
  getMeta();
}
let getMeta = () => {
  return fetch('http://106.75.213.16/file?' + new URLSearchParams({
    'name': select_file.value,
    'per_page': +per_page.value
  }), {method: "GET"}).then(res => res.json()).then(res => {
    res = JSON.parse(res)
    key_options.value = Object.keys(res).filter(item => {
      return !['size', 'pages', 'per_page'].includes(item)
    })
    for (let i = 0; i < key_options.value.length; i++) {
      let val = res[key_options.value[i]]
      key_options.value[i] = key_options.value[i] + "_" + val
    }
    page_options.value = Array.from(new Array(res.pages).keys())
    select_page.value = 0
  })
}
onMounted(() => {
  getFiles().then(() => {
    getMeta()
  });
})



</script>

<style scoped>

</style>
